<template>
	<view class="content">
		<nav-bar :title="$t('掃碼下載')" leftIcon="left"></nav-bar>
		<view class="box">
			<!-- 			<view class="info">
				<image class="headPic" mode="aspectFill" src="@/assets/my/users.png"></image>
				<view class="name-brief">
					<view class="name">
						<text v-if="data?.name">{{data.name}}</text>
					</view>
					<view class="brief" v-if="data?.text">
						我的邀请码{{data.text}}
					</view>
				</view>
			</view> -->
			<!-- <image class="QR" src="@/assets/my/users.png"></image> -->
			<qrcode-vue :value="flowList.urlCFP" size="180" level="H" class="CodeQr" :margin="2" />
<!-- 			<view class="card">
							<view class="text">
					我的邀请码
				</view>
				<view class="ma">
					<view>{{ flowList.urlCFP }}</view>
					<view class="btn" @click="copy">
						{{ $t('一鍵複製') }}
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import QrcodeVue from 'qrcode.vue'
	import {
		computed,
		onMounted,
		ref,
		reactive
	} from 'vue'
	import i18n from '@/locale/index'
	import getInviteFriends from '@/hooks/inviteFriends.js'
	const {
		list,
		details,
		page,
		size,
		sumComputed,
		getMyInviteFriends
	} = getInviteFriends()
	var data = reactive({
		name: '123',
		dj: 1,
		text: 'dss12344',
		ll: 456,
		cfp: 4645,
		rs: 456
	})
	const flowList = ref({})
	const getLIst = async () => {
		let ids = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		const data = await getMyInviteFriends('/user/qrCodeUser', ids)
		flowList.value = data
	}
	getLIst()

	const copy = () => {
		uni.setClipboardData({
			data: flowList.value.urlCFP,
			success: function() {
				uni.showToast({
					title: `${i18n.global.t('複製成功')}`,
					duration: 1000
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.CodeQr {
		position: relative;
		left: 20%;
	}

	.box {
		width: 691rpx;
		height: 1035rpx;
		background: #24232C;
		border-radius: 20rpx;
		padding: 40rpx 62rpx 55rpx;
		box-sizing: border-box;
		margin-top: 80rpx;

		.info {
			display: flex;

			.headPic {
				width: 126rpx;
				height: 126rpx;
				border: 3rpx solid #FFFFFF;
				border-radius: 50%;
			}

			.name-brief {
				margin-left: 24rpx;
				flex: 1;
				margin-top: 23rpx;

				.name {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					.grade {
						width: 173rpx;
						height: 41rpx;
						position: relative;
						top: 5rpx;
						left: 11rpx;
					}
				}

				.brief {
					margin-top: 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #808492;
					line-height: 24rpx;
				}
			}
		}

		.QR {
			width: 567rpx;
			height: 567rpx;
			border-radius: 25rpx;
			overflow: hidden;
			margin-top: 43rpx
		}

		.card {
			// background: url("@/assets/inviteFriends/bj.png");
			// background-size: 100% 100%;
			margin-top: 33rpx;
			width: 567rpx;
			height: 171rpx;
			padding: 0 26rpx;
			box-sizing: border-box;
			display: flex;
			// flex-direction: column;
			justify-content: center;

			.text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.ma {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				// display: flex;
				// align-items: center;

				.btn {
					width: 120rpx;
					height: 50rpx;
					background: #A49AE6;
					border-radius: 10rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 50rpx;
					margin-left: 9rpx;
					margin: 0 auto;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>